<template>
	<view>
		<view class="user-section">
			<image class="bg" src="/static/1.png"></image>	
		</view>
	<u-form :model="form" ref="uForm">
				<u-form-item label="姓名" >
					<u-input class="input-input" placeholder="请输入您的姓名" />
				</u-form-item>
				<u-form-item label="电话" >
					<u-input class="input-input" placeholder="请输入您的电话号码" />
				</u-form-item>
				<u-form-item label="店名" >
					<u-input class="input-input" placeholder="请输入您的店名" />
				</u-form-item>
				<u-form-item label="地址" >
					<u-input class="input-input" placeholder="请输入您的地址" />
				</u-form-item>
			</u-form>
			<u-checkbox-group>
				<u-checkbox v-model="checked">注意《入住协议》</u-checkbox>
			</u-checkbox-group>
			<u-button @click="submit" :custom-style="customStyle">确定入驻</u-button>
	</view>
</template>

<script>
	import {  
	    mapState,  
	    mapMutations  
	} from 'vuex';  
	export default {
		data() {
			return {
				customStyle: {
					width:'80%',
					height:'50px',
					borderRadius:'30px',
					marginTop: '10px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#fff',
					background:'red',
							}
			};
		},
		computed:{
			...mapState(['userInfo']),
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff;
	}
	.input-input{
		background: #efebeb;
		border-radius: 20px;
	}
	.user-section{
		display:flex;
		align-items:center;
		justify-content: center;
		height: 380upx;
		padding: 40upx 30upx 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
		.portrait-box{
			width: 200upx;
			height: 200upx;
			border:6upx solid #fff;
			border-radius: 50%;
			position:relative;
			z-index: 2;
		}
		.portrait{
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
		.yticon{
			position:absolute;
			line-height: 1;
			z-index: 5;
			font-size: 48upx;
			color: #fff;
			padding: 4upx 6upx;
			border-radius: 6upx;
			background: rgba(0,0,0,.4);
		}
		.pt-upload-btn{
			right: 0;
			bottom: 10upx;
		}
		.bg-upload-btn{
			right: 20upx;
			bottom: 16upx;
		}
	}
	.u-grid-item{
		height: 126px;
	}
	.u-form{
		padding: 20px 40px;
	}
	.u-checkbox-group{
		padding: 0 40px;
	}
	

</style>